<template>
  <div id="app">
    <el-menu>
      <el-menu-item index="1" @click="toFindMoney">
        <i class="el-icon-menu"></i>
        <span class="baise"> 查询余额</span>
        <span slot="title"></span>
      </el-menu-item>
      <el-menu-item index="2" @click="toTransfer">
        <i class="el-icon-menu"></i>
        <span class="baise"> 转账</span>
      </el-menu-item>
      <el-menu-item index="3" @click="toFindRecord">
        <i class="el-icon-document"></i>
        <span class="baise"> 查询交易记录</span>
      </el-menu-item>
      <el-menu-item index="4" @click="toUpdate">
        <i class="el-icon-setting"></i>
        <span class="baise"> 修改密码</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    toTransfer() {
      this.$router.push({
        path: "/home/tra",
      });
    },
    toFindMoney() {
      this.$router.push({
        path: "/home/deposit",
      });
    },
    toFindRecord() {
      this.$router.push({
        path: "/home/deal",
      });
    },
    toUpdate() {
      this.$router.push({
        path: "/home/update",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu--collapse,
.el-menu--collapse i.el-submenu__icon-arrow {
  height: 0;

  overflow: hidden;
  visibility: hidden;
  display: inline-block;

  color: #ffffff;
}
a {
  color: #409eff;
  text-decoration: none;
}

.el-menu {
  background-color: #272c33;
}
.baise {
  color: #fff;
}

#app {
  background-color: #272c33;
  width: 200px;
}
</style>